<template>
    <div class="login_contain">
        <!-- 登录块   -->
        <div class="login_box">
            <div class="avater_box">
                <img src="../assets/img/b2.jpg">
            </div>
            <!-- 登录表单 -->
            <!--   :rules="loginRules" 表示检验规则-->
            <el-form ref="LoginFormRef" :model="LoginForm" label-width="100px" class="Login_form" status-icon :rules="LoginRules">
                <!--    用户名    -->
                <el-form-item prop="username" label="用户名">
                    <el-input v-model="LoginForm.username" prefix-icon="el-icon-user" autocomplete="off"></el-input>
                </el-form-item>
                <!--    密码   -->
                <el-form-item prop="password" label="密码">
                    <el-input v-model="LoginForm.password" type="password" prefix-icon="el-icon-unlock" ></el-input>
                </el-form-item>
                <el-form-item prop="password" label="姓名">
                    <el-input v-model="LoginForm.name"  prefix-icon="el-icon-mobile" ></el-input>
                </el-form-item>
                <el-form-item prop="password" label="年龄">
                    <el-input v-model="LoginForm.age"  prefix-icon="el-icon-mobile" ></el-input>
                </el-form-item>
                <el-form-item prop="password" label="手机号">
                    <el-input v-model="LoginForm.tel"  prefix-icon="el-icon-mobile" ></el-input>
                </el-form-item>

                <!--    按钮    -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="submitForm">注册</el-button>
                    <el-button type="warning" @click="resetForm">重置</el-button>
                    <el-button type="info" @click="returnPage">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            var validateName  = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入要注册的用户名'));
                } else  {
                    if (value === '') {
                        callback(new Error('请输入用户名'));
                    } else  {
                        if(value!==''){
                            this.$http.get("user/check",{params:{username:this.LoginForm.username}}).then(res=>{
                                if(res.data.code==20000){
                                    callback(new Error('用户名已存在'));
                                }
                                else {
                                    callback();
                                }
                            })
                        }
                    }
                }
            };
            return {
                LoginForm: {
                    username: '',
                    password: '',
                    name:'',
                    age:'',
                    tel:''
                },
                LoginRules: {
                    username: [
                        { validator: validateName, trigger: 'blur' }
                    ],
                    password: [
                        {required: true, message: '请输入要注册的密码', trigger: 'blur'},
                        {min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur'}
                    ],
                }
            };
        },
        methods: {
            submitForm() {
                this.$refs.LoginFormRef.validate(async valid => {
                   if(!valid)return;
                        //进行用户名和密码的注册
                        const {data:res}= await this.$http.post("user/regist",this.LoginForm);
                        //进行个人信息的添加
                        const {data:res1}= await this.$http.post("userInfo/add",this.LoginForm);
                        if(res1.code===20000){
                            this.$message.success("注册成功");
                            setTimeout(() =>{
                                this.$router.push("/login");
                            },1000);
                        }
                });
            },
            resetForm() {
                this.$refs.LoginFormRef.resetFields();
            },
            returnPage() {
                 // 跳转上一级
                // 这个判断用来解决这种情况，当用户没有上一条路由的历史记录，
                // 出现点击返回按钮没有反应时，下面的代码用来判断有没有上一条路由的历史记录   如果没有则返回首页
                if (window.history.length <= 1) {
                    this.$router.push({ path: "/login" });
                    return false;
                } else {
                    this.$router.go(-1);
                }
            }

        }
    }
</script>

<style scoped lang="less">
    // 跟节点样式
    .login_contain {
        height: 100%;
        width: 100%;
        height: 100%;
        background: url("../assets/img/b0.jpg") center center no-repeat;
        background-size: 100% 100%;
        position: fixed;
    }

    .login_box {
        width: 450px;
        height: 470px;
        background-color: #fff;
        border-radius: 3px; // 圆角
        position: absolute; // 绝对定位
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); // 根据自己位置 以自己为长度位移
        // 头像框
        .avater_box {
            width: 130px;
            height: 130px;
            border: 1px solid #EEEEEE;
            border-radius: 50%; // 加圆角
            padding: 10px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #FFFFFF;

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%; // 加圆角
                background-color: #EEEEEE;
            }
        }
    }

    .btns {
        display: flex; // 弹性布局
        justify-content: flex-end; // 尾部对齐
    }

    .Login_form {
        position: absolute;
        bottom: -5%;
        width: 100%;
        padding: 10px 40px 15px 5px;
        box-sizing: border-box; // 设置边框
    }
    .sa{
        color: chartreuse;
        margin-bottom: 20px;
    }
</style>
